<template>
	<view class="content">
		<view style="swiperView">
			<swiper style="width: 100vw;height: 100vh;" :circular="true" :indicator-dots="false" :autoplay="true" :interval="6000" :duration="1000">
				<swiper-item>
					<view style="background-color: #007AFF;width: 100%;height: 100%;" class="swiper-item"></view>
				</swiper-item>
				<swiper-item>
					<view style="background-color: #4CD964;width: 100%;height: 100%;" class="swiper-item"></view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="contentView" :class="hideShow ? 'show' : 'hide'">
			<view class="widthAll contact marginAuto">
				<view class="lineWidth marginAuto bottomLine line flex alignCenter spaceBetween">
					<view class="lineLeft flex alignCenter ">
						姓名
					</view>
					<view class="lineRight flex alignCenter">
						<input type="text" placeholder="请输入姓名" placeholder-style="font-size: 28rpx;color: #999999;">
					</view>
				</view>
				<view class="lineWidth marginAuto bottomLine line flex alignCenter spaceBetween">
					<view class="lineLeft flex alignCenter ">
						手机号
					</view>
					<view class="lineRight flex alignCenter">
						<input type="text" placeholder="请输入手机号" placeholder-style="font-size: 28rpx;color: #999999;">
					</view>
				</view>
				<view class="lineWidth marginAuto line flex alignCenter spaceBetween">
					<view class="lineLeft flex alignCenter ">
						验证码
					</view>
					<view class="lineRight flex alignCenter">
						<input type="text" placeholder="请输入验证码" placeholder-style="font-size: 28rpx;color: #999999;">
					</view>
				</view>
			</view>
		</view>
		
		<uni-popup type="center" ref="mainpop">
			<view style="width: 200rpx;height: 200rpx;background-color: #F0AD4E;"></view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hideShow: false
			}
		},
		onLoad() {
		},
		onReady() {
			setTimeout(() => {
				this.hideShow = true
			}, 1000)
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.lineLeft{
		width: 170rpx;
		font-size: 28rpx;
		color: #333333;
	}
	.lineRight{
		flex: 1;
		height: 100%;
	}
	.contact{
		height: 324rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
		margin-top: 20rpx!important;
	}
	.line{
		height: 106rpx;
	}
	// .marginAuto{margin: auto;}
	.widthAll{width: 690rpx;}
	.swiperView{
		width: 100vw;
		height: 100vh;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1;
	}
	.contentView{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 100vh;
		left: 0;
		transition: all 2s;
		background: rgba($color: #000000, $alpha: .5);
		z-index: 2;
		overflow: hidden;
	}
	.show{top: 0;}
	.hide{top: 100vh;}
</style>
